<template>
	<view class="content">
		<view class="flex">
			<view class="userInfo flex">
				<view>
					<u--image width="50rpx" shape="circle" height="50rpx" :src="articleInfo.user_logo_image" ></u--image>
				</view>
				<view class="author">{{articleInfo.author}}</view>
			</view>
		</view>
		<!-- 轮播 -->
		<view>
			<u-swiper
					:list="articleInfo.images"
					:indicator="true"
					height="200"
					@change=""
					@click=""
			></u-swiper>
		</view>
		<!-- 信息 -->
		<view class="info">
			<view class="title">{{articleInfo.title}}</view>
			<view v-html="articleInfo.content"></view>
			<view class="createtime">发布于{{articleInfo.createtime}}</view>
			<u-line></u-line>
		</view>
		<view class="say">
			<view>评论区({{articleInfo.sayCount}})</view>
			<view class="flex sayUserInfo" v-for="(item,i) in articleInfo.say" :key="i">
				<view class="flex ">
					<view>
						<u--image width="50rpx" shape="circle" height="50rpx" :src="articleInfo.user_logo_image" ></u--image>
					</view>
					<view class="author" style="width: 150rpx; overflow: hidden;">{{item.author}}</view>
				</view>
				<view class="sayContent" style="width: 350rpx; overflow: hidden;">{{item.content}}</view>
				<view class="sayTime">{{item.time}}</view>
			</view>
		</view>
		<view class="bottomButton flex">
			<view :class="sayInput" >
				  <u--input
				    placeholder="说点什么把"
				    border="surround"
				    v-model="sayContent"
					shape="circle"
					@focus="sayFocus"
					@blur="sayBlur"
				  ></u--input>
			</view>
			<view   :class="sayButtonThumb" class="flex" style="align-items: center;">
				<view @click="thumbUpClick" ><u-icon name="thumb-up"   size="20"></u-icon></view>
				<view class="thumbNum">{{articleInfo.nice_num}}</view>
				<view  @click="sayFocus"><u-icon name="chat"   size="20"></u-icon></view>
				<view class="thumbNum">{{articleInfo.sayCount}}</view>
			</view>
			<view  :class="sayButtonSend" style="margin-left: 20rpx;">
				<u-button type="primary" @click="saySend" shape="circle" customStyle="font-size:25rpx; width:120rpx;" >发送</u-button>
			</view>
		</view>
		<view class="shareButton">
			<button open-type="share" class="shareBtn">
				<u-icon name="share" class="shareIcon" size="20" ></u-icon>
				分享
			</button>
		</view>
	</view>
</template>

<script>
	import http from '@/apis/http.js'
	export default {
		data() {
			return {
				articleInfo : {},
				articleId : 0,
				sayContent:'',
				sayButtonThumb:{thumbUp:true,displayNone:false},
				sayButtonSend:{sayButton:true,displayNone:true},
				sayInput:{sayInput:true,sayInputFocus:false}
			}
		},
		methods: {
			getLifeInfo(){
				http.POST('tourism_life/info',{'articleId':this.articleId}).then(res=>{
					if(res.code == 1){
						this.articleInfo = res.data
					}else{
						uni.showToast({
							'title':res.msg,
							'icon':'none'
						})
					}
				})
			},
			sayFocus(){
				this.sayInput.sayInput = false
				this.sayInput.sayInputFocus = true
				this.sayButtonThumb.displayNone = true
				this.sayButtonSend.displayNone = false
			},
			sayBlur(){
				setTimeout(()=>{
					this.sayInput.sayInput = true
					this.sayInput.sayInputFocus = false
					this.sayButtonThumb.displayNone = false
					this.sayButtonSend.displayNone = true 
				},2000)
			},
			saySend(){
				http.POST('tourism_life/saySend',{content:this.sayContent,id:this.articleId}).then(res=>{
					if(res.code == 1){
						this.getLifeInfo()
					}else{
						uni.showToast({
							'title':res.msg,
							'icon':'none'
						})
					}
				})
			},
			thumbUpClick(v){

				http.POST('tourism_life/thumb_up',{'id':this.articleId}).then(res=>{
					if(res.code == 1){
						uni.showToast({
							'title':'成功',
							'icon':'none'
						})
						this.getLifeInfo()
					}else{
						uni.showToast({
							'title':res.msg,
							'icon':'none'
						})
					}
				})
			},
		},
		onLoad(option) {
			this.articleId = option.id
			this.getLifeInfo()
		}
	}
</script>

<style>
	.displayNone {display: none !important;}
	.flex { display: flex;}
	.userInfo { align-items: center; padding: 20rpx; }
	.author {padding-left: 10rpx;}
	.info { margin-top: 30rpx; padding: 20rpx;}
	.title { font-size: 40rpx; font-weight: bold; margin-bottom: 20rpx;}
	.createtime{margin:40rpx 0; font-size: 20rpx; color: #abaaaf;}
	.say{padding: 20rpx; min-height: 400rpx;}
	.thumbUp {align-items: center; justify-content: space-around; } 
	.sayInput { width: 300rpx; margin-right: 50rpx;}
	.thumbNum{margin: 0 30rpx;font-size: 20rpx;}
	.sayContent { margin: 0 20rpx; flex-grow: 2;}
	.sayTime { font-size: 20rpx; align-self: center;}
	.sayUserInfo { margin: 40rpx 0 10rpx 0; justify-content: space-between; text-align: left;}
	.bottomButton {
		position: fixed;
		bottom: 0;
		padding: 20rpx;
	},
	.sayInputFocus{
		width: 500rpx;
	}
	.shareButton {  position: fixed; bottom: 200rpx; right: -25rpx;}
	.shareBtn { display: flex; font-size: 30rpx; border-radius:  50rpx; background-color: black; opacity: 0.2; color:#fff;}
</style>
